{% extends 'bike/base.html' %}

{% block title %}违章记录 - 自行车管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="bi bi-exclamation-triangle"></i> 违章记录</h2>
                <div>
                    <a href="{% url 'bike:bike_list' %}" class="btn btn-outline-primary me-2">
                        <i class="bi bi-bicycle"></i> 自行车列表
                    </a>
                    <a href="{% url 'bike:bike_statistics' %}" class="btn btn-outline-info">
                        <i class="bi bi-graph-up"></i> 统计信息
                    </a>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">{{ total_violations }}</h4>
                                    <p class="card-text">总违章数</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-exclamation-triangle display-4"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">{{ pending_count }}</h4>
                                    <p class="card-text">待处理</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-clock display-4"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">{{ processing_count }}</h4>
                                    <p class="card-text">处理中</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-gear display-4"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="card-title">{{ resolved_count }}</h4>
                                    <p class="card-text">已解决</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="bi bi-check-circle display-4"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 搜索和筛选 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-3">
                            <label for="search" class="form-label">搜索</label>
                            <input type="text" class="form-control" id="search" name="search" 
                                   value="{{ search }}" placeholder="搜索自行车编号、所有人、地点等">
                        </div>
                        <div class="col-md-2">
                            <label for="violation_type" class="form-label">违章类型</label>
                            <select class="form-select" id="violation_type" name="violation_type">
                                <option value="">全部类型</option>
                                {% for type_code, type_name in violation_types %}
                                <option value="{{ type_code }}" {% if violation_type == type_code %}selected{% endif %}>
                                    {{ type_name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="status" class="form-label">处理状态</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">全部状态</option>
                                {% for status_code, status_name in status_choices %}
                                <option value="{{ status_code }}" {% if status == status_code %}selected{% endif %}>
                                    {{ status_name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="college" class="form-label">所属学院</label>
                            <select class="form-select" id="college" name="college">
                                <option value="">全部学院</option>
                                {% for college_code, college_name in colleges %}
                                <option value="{{ college_code }}" {% if college == college_code %}selected{% endif %}>
                                    {{ college_name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                            <a href="{% url 'bike:frontend_violation_list' %}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-clockwise"></i> 重置
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 违章记录列表 -->
            <div class="card">
                <div class="card-body">
                    {% if page_obj %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>自行车编号</th>
                                    <th>所有人</th>
                                    <th>违章类型</th>
                                    <th>违章地点</th>
                                    <th>检查人</th>
                                    <th>状态</th>
                                    <th>举报时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for violation in page_obj %}
                                <tr>
                                    <td>
                                        <span class="badge bg-primary">{{ violation.bicycle.bike_number }}</span>
                                    </td>
                                    <td>{{ violation.bicycle.owner_name }}</td>
                                    <td>
                                        <span class="badge bg-danger">{{ violation.get_violation_type_display }}</span>
                                    </td>
                                    <td>{{ violation.location }}</td>
                                    <td>{{ violation.reporter_name|default:"匿名" }}</td>
                                    <td>
                                        {% if violation.status == 'pending' %}
                                        <span class="badge bg-warning">待处理</span>
                                        {% elif violation.status == 'processing' %}
                                        <span class="badge bg-info">处理中</span>
                                        {% elif violation.status == 'resolved' %}
                                        <span class="badge bg-success">已解决</span>
                                        {% else %}
                                        <span class="badge bg-secondary">已撤销</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ violation.created_at|date:"m-d H:i" }}</small>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                data-bs-toggle="modal" data-bs-target="#violationModal{{ violation.id }}">
                                            <i class="bi bi-eye"></i> 查看详情
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    {% if page_obj.has_other_pages %}
                    <nav aria-label="分页导航" class="mt-4">
                        <ul class="pagination justify-content-center">
                            <!-- 首页 -->
                            {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                    <i class="bi bi-chevron-double-left"></i> 首页
                                </a>
                            </li>
                            {% endif %}

                            <!-- 上一页 -->
                            {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                    <i class="bi bi-chevron-left"></i> 上一页
                                </a>
                            </li>
                            {% endif %}

                            <!-- 页码显示 -->
                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if college %}&college={{ college }}{% endif %}">{{ num }}</a>
                                </li>
                                {% endif %}
                            {% endfor %}

                            <!-- 下一页 -->
                            {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                    下一页 <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                            {% endif %}

                            <!-- 末页 -->
                            {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if college %}&college={{ college }}{% endif %}">
                                    末页 <i class="bi bi-chevron-double-right"></i>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                        
                        <!-- 分页信息 -->
                        <div class="text-center text-muted small mt-2">
                            显示第 {{ page_obj.start_index }} - {{ page_obj.end_index }} 条，共 {{ page_obj.paginator.count }} 条记录
                            （第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页）
                        </div>
                    </nav>
                    {% endif %}

                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-check-circle display-1 text-success"></i>
                        <h4 class="text-muted mt-3">暂无违章记录</h4>
                        <p class="text-muted">所有自行车都表现良好！</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 违章详情模态框 -->
{% for violation in page_obj %}
<div class="modal fade" id="violationModal{{ violation.id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">违章详情 - {{ violation.bicycle.bike_number }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>自行车编号：</strong>{{ violation.bicycle.bike_number }}</p>
                        <p><strong>所有人：</strong>{{ violation.bicycle.owner_name }}</p>
                        <p><strong>违章类型：</strong>{{ violation.get_violation_type_display }}</p>
                        <p><strong>违章地点：</strong>{{ violation.location }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>检查人：</strong>{{ violation.reporter_name|default:"匿名" }}</p>
                        <p><strong>举报电话：</strong>{{ violation.reporter_phone|default:"未提供" }}</p>
                        <p><strong>举报时间：</strong>{{ violation.created_at|date:"Y年m月d日 H:i" }}</p>
                        <p><strong>当前状态：</strong>
                            {% if violation.status == 'pending' %}
                            <span class="badge bg-warning">待处理</span>
                            {% elif violation.status == 'processing' %}
                            <span class="badge bg-info">处理中</span>
                            {% elif violation.status == 'resolved' %}
                            <span class="badge bg-success">已解决</span>
                            {% else %}
                            <span class="badge bg-secondary">已撤销</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <p><strong>违章描述：</strong></p>
                        <p>{{ violation.description }}</p>
                    </div>
                </div>
                {% if violation.violation_images %}
                <div class="row">
                    <div class="col-12">
                        <p><strong>违章照片：</strong></p>
                        <img src="{{ violation.violation_images.url }}" alt="违章照片" class="img-fluid">
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}
